<!-- 我的图标 -->

<template>
  <div class="SystemMenu-MyIcon">
    <FormRadio label="图标类型" bind="iconType" :dict="DICT.ICON_TYPE" required @change="changeIconType" />

    <FormSlot v-if="one.iconType === 1" label="图标" bind="icon" :tip="`请选择${DICT.ICON_TYPE[1][1]}`" required>
      <div><i :class="one.icon" @click="openIcon" /></div>
    </FormSlot>
    <FormPhoto
      v-else
      label="图标"
      bind="icon"
      folder="icon"
      isPublic
      text="SVG 图标"
      tip="请上传 SVG 图标"
      svg
      square
      :squareSize="80"
      required
    />

    <EasyModal v-model="easyVisible" title="选择图标" bgClose huge @submit="toSubmit">
      <i v-for="icon in CORE.MAP.MENU_SYS_ICONS" :key="icon" :class="getIconClass(icon)" @click="chosenIcon = icon" />
    </EasyModal>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyIcon',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      easyVisible: false, // 图标弹窗可见
      chosenIcon: '', // 已选中图标
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换图标类型
     */
    changeIconType(type) {
      this.one.icon = type === 2 ? '' : 'el-icon-document'
    },

    /**
     * 打开图标弹窗
     */
    openIcon() {
      this.chosenIcon = this.one.icon.slice(8)
      this.easyVisible = true
    },

    /**
     * 提交图标选择
     */
    toSubmit() {
      this.one.icon = `el-icon-${this.chosenIcon}`
      this.easyVisible = false
    },

    /**
     * 获取图标样式类
     */
    getIconClass(icon) {
      const name = 'SystemMenu-MyIcon-item'
      const chosenStr = this.chosenIcon === icon ? ` ${name}-chosen` : ''
      return `${name}${chosenStr} el-icon-${icon}`
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
